import Taro, {Component} from '@tarojs/taro'
import {View, Button, Text, Swiper, SwiperItem, Image, ScrollView, Map} from '@tarojs/components'
import {connect} from '@tarojs/redux'
import {
  set_userinfo, set_cart, set_goodslist, set_viplist, set_bind_car_num, set_progress,
  set_pushdata, set_pushdatanum, gohome_btn, set_cart_num, set_Location,
} from '../../actions/IndexAction'
import base from "../base"
import {AtList, AtListItem, AtImagePicker} from 'taro-ui'
import './index.less'
import set from "../../apis/api"

const width = wx.getSystemInfoSync().windowWidth
const height = wx.getSystemInfoSync().windowHeight
var QQMapWX = require('../../components/qqmap/qqmap-wx-jssdk.js');
var qqmapsdk;

class mapSelect extends Component {
  constructor(props) {
    super(props)
    base(this)
    this.state = {
      jd: 112,
      wd: 28,
      jzlist: []
    }
  }

  config = {
    navigationBarTitleText: '选择位置',
    enablePullDownRefresh: true,
    navigationBarBackgroundColor: "#4bb33d",
    navigationBarTextStyle: "white"

  }

  onReachBottom() {


  }


  componentWillReceiveProps(nextProps) {
    console.log(this.props, nextProps)
  }

  onPullDownRefresh() {
    //  this.fetchData();
    wx.stopPullDownRefresh();
  }

  componentWillUnmount() {
  }

  setLocation() {

    let pages = getCurrentPages(); //获取当前页面js里面的pages里的所有信息。

    let prevPage = pages[pages.length - 2];
    wx.setStorageSync('jzlist',JSON.stringify(this.state.jzlist))

    prevPage.setData({  // 将我们想要传递的参数在这里直接setData。上个页面就会执行这里的操作。

      jzlist: this.state.jzlist,

    })

    setTimeout(()=>{
      Taro.navigateBack();
    },100)


  }

  back() {
    Taro.navigateBack();
  }

  componentDidShow() {

    var jzlist = JSON.parse(this.$router.params.jzlist);
    console.log(jzlist[0])
    this.setState({
      jd: jzlist[0].longitude,
      wd: jzlist[0].latitude,
      jzlist: jzlist
    }, () => {
      console.log(this.state.jd)
    })




    this.onPullDownRefresh()


  }


  componentDidHide() {
  }

  test(val) {
    this.state.jzlist[0].longitude = val.detail.longitude
    this.state.jzlist[0].latitude = val.detail.latitude
    this.setState({
      jzlist: this.state.jzlist,
    })
  }
  getUserLocation() {
    wx.showLoading({title: "加载中"})
    let vm = this;
    qqmapsdk = new QQMapWX({
      key: vm.props.sys_config.sets.app_key //这里自己的key秘钥进行填充
    });
    wx.getSetting({
      success: (res) => {
        console.log(JSON.stringify(res))
        // res.authSetting['scope.userLocation'] == undefined    表示 初始化进入该页面
        // res.authSetting['scope.userLocation'] == false    表示 非初始化进入该页面,且未授权
        // res.authSetting['scope.userLocation'] == true    表示 地理位置授权
        if (res.authSetting['scope.userLocation'] != undefined && res.authSetting['scope.userLocation'] != true) {
          wx.showModal({
            title: '请求授权当前位置',
            content: '需要获取您的地理位置，请确认授权',
            success: function (res) {
              if (res.cancel) {
                wx.showToast({
                  title: '拒绝授权',
                  icon: 'none',
                  duration: 1000
                })
              } else if (res.confirm) {
                wx.openSetting({
                  success: function (dataAu) {
                    if (dataAu.authSetting["scope.userLocation"] == true) {
                      wx.showToast({
                        title: '授权成功',
                        icon: 'success',
                        duration: 1000
                      })
                      //再次授权，调用wx.getLocation的API
                      vm.getLocation();
                    } else {
                      wx.showToast({
                        title: '授权失败',
                        icon: 'none',
                        duration: 1000
                      })
                    }
                  }
                })
              }
            }
          })
        } else if (res.authSetting['scope.userLocation'] == undefined) {
          //调用wx.getLocation的API
          vm.getLocation();
        }
        else {
          //调用wx.getLocation的API
          vm.getLocation();
        }
      }
    })
  }
  // 获取当前地理位置
  getLocal (latitude, longitude) {
    let vm = this;
    qqmapsdk.reverseGeocoder({
      location: {
        latitude: latitude,
        longitude: longitude
      },
      success: function (res) {
        console.log(JSON.stringify(res));
        let province = res.result.ad_info.province
        let city = res.result.ad_info.city


        vm.state.jzlist[0].longitude = longitude
        vm.state.jzlist[0].latitude = latitude
        wx.hideLoading();
        vm.setState({
          jzlist: vm.state.jzlist,
          jd:longitude,
          wd:latitude
        })

      },
      fail: function (res) {
        console.log(res);
      },
      complete: function (res) {
        // console.log(res);
      }
    });
  }
  // 微信获得经纬度
  getLocation() {
    let vm = this;
    wx.getLocation({
      //type: 'wgs84',
      type: 'gcj02',
      success: function (res) {
        console.log("定位成功 = ", res)
        var latitude = res.latitude
        var longitude = res.longitude
        vm.getLocal(latitude, longitude)
      },
      fail: function (res) {
        wx.showToast({
          title: '定位失败,请确认您己授权开启定位服务',
          icon: 'none'
        })
      }
    })
  }

  setMyLocation()
  {
    this.getUserLocation();

  }

  render() {
    const {jd, wd, jzlist} = this.state
    return (
      <View style={{flex: 1, background: "#ffffff", minHeight: "100vh"}}>
        <ScrollView>

          <Map
            longitude={jd}
            latitude={wd}
            markers={jzlist}
            style={{height: height - 100 + "px", width: width + "px"}}
            onClick={this.test.bind(this)}
          />


        </ScrollView>
        <View style={{
          background: "#ffffff",
          height: "100px",
          position: "fixed",
          bottom: "0",
          width: "100%",
          borderTop: "2rpx #f0f2f5 solid",

        }}>
          <View style={{display:"flex"}}>
            <View style={{borderBottom: "2rpx solid #eeeeee", marginBottom: "10rpx",flex:1}}>
              <View
                style={{
                  flex: 1, padding: "5rpx"
                }}>

                <Text style={{color: "#999999", fontSize: "26rpx", marginLeft: "10rpx"}}>
                  经度:{jzlist[0] && jzlist[0].longitude ? jzlist[0].longitude : ""}
                </Text>
              </View>

              <View
                style={{
                  flex: 1, padding: "5rpx"
                }}>
                <Text style={{color: "#999999", fontSize: "26rpx", marginLeft: "10rpx"}}>
                  纬度:{jzlist[0] && jzlist[0].latitude ? jzlist[0].latitude : ""}
                </Text>

              </View>
            </View>
            <View style={{width:"300rpx",height:"100rpx",alignItems:"center",justifyContent:"center",display:"flex"}}>
              <View onClick={this.setMyLocation.bind(this)} style={{
                background: "#4bb33d",
                borderRadius: "10rpx",
                width: "80%",
                height: "70rpx",
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
              }}>
                <Text style={{color: "#ffffff", fontSize: "26rpx"}}>
                  定位到当前位置
                </Text>

              </View>

            </View>
          </View>
          <View
            style={{
              flex: 1, display: "flex",
              alignItems: "center",
              justifyContent: "center",
            }}>

            <View
              style={{
                flex: 1, display: "flex",
                alignItems: "center",
                justifyContent: "center",
              }}>

              <View onClick={this.back.bind(this)} style={{
                border: "1rpx solid #cccccc",
                borderRadius: "10rpx",
                width: "80%",
                height: "70rpx",
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
              }}>
                <Text style={{color: "#999999", fontSize: "26rpx"}}>
                  取消
                </Text>

              </View>
            </View>
            <View
              style={{
                flex: 1, display: "flex",
                alignItems: "center",
                justifyContent: "center",
              }}>

              <View onClick={this.setLocation.bind(this)} style={{
                background: "#4bb33d",
                borderRadius: "10rpx",
                width: "80%",
                height: "70rpx",
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
              }}>
                <Text style={{color: "#ffffff", fontSize: "26rpx"}}>
                  确定
                </Text>

              </View>
            </View>
          </View>
        </View>
      </View>
    )
  }
}

const mapstate = state => {
  return {
    userinfo: state.usermodel,
    cart_num: state.cart_num,
    cart: state.cart,
    goodslist: state.goodslist,
    vip: state.vip,
    progress: state.progress,
    pushdata: state.pushdata,
    wxuser: state.wxusermodel, sys_config: state.sys_config,
    gytoken: state.gytoken
  }
}
export default connect(mapstate)(mapSelect)

